<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../plugins/vue.min.js"></script>

</head>
<body>
    <div id="box">
        <div v-for="itme of 20">{{name}}</div>


     <ul>
        <li v-for="data in dataList" :key="data">{{data}}</li>
     </ul>

     <child v-if="isShow"></child>
    </div>

    <script>
        Vue.component("child",{
            data(){
                return{
                    time:1000
                }
            },
            template:`
            <div>
                定时任务倒计时{{time}}
                </div>
          
            `,
            mounted(){
                // 定义了一个变量,在其他生命周期中可以使用
              this.enent =  setInterval(() => {
                    console.log("倒计时进行中")
                    this.time--
                }, 1000);
                // window.onresize=function(){
                //     console.log("resize")
                // }
                  window.onresize=()=>{
                    console.log("resize")
                }

            },
            beforeDestroy(){
                console.log('clean',"清除一些事件")
                clearInterval(this.enent)

                // 跟window有关的,
                window.onresize=null

            },
            destroyed() {
                
            },

        })
      let vm =   new Vue({
            el:"#box",
            data:{
                name:"张三",
                dataList:[],
                isShow:true
            },
            // 在创建之前
            beforeCreate() {
                console.log("beforeCreate",this.name)     //undefined
            },
            // 初始化状态或者是挂载当前实例的一些属性
            created() {
                console.log("created",this.name);        //张三
                this.name = "我改变了"
                // this.user = localStorage.getItem("user");      //可以存放一些属性值全局变量

                // 例如
                this.mm= 'kk'     //相当于定义了一个全局变量,可以拱后面的使用,也可以在他们的周期里面定义
            },

            beforeMount() {
                // console.log(this.$el = `<span>dudu</span>`)   //模板解析之前
                console.log(this.$el,"before=====>")
            },

            // 依赖于dom创建之后,才进行初始化工作的插件(轮播插件)
            // 订阅,bus.$on
            // 发送ajax请求
            mounted() {
                console.log("拿到真的dom节点",document.getElementById("box").innerHTML)
                // setTimeout(() => {
                //     this.dataList=["11","22"]
                //     // 拿到的是0,此时还没有生成真实的dom节点,虚拟dom
                //     // 状态立即更新,dom异步生成
                //     console.log(document.getElementsByTagName("li").length);
                //     console.log("拿到真的dom节点",document.getElementById("box").innerHTML)
                // }, 2000);
                console.log("mouted---->>>")
                window.onscroll = ()=>{
                    console.log(document.documentElement.scroll,"hight")
                }
            },

            // <!-- 以上四个生命周期只会在组件中走一次 -->




            // 下面这两种,只要状态发生了变化,就会执行,可以执行无数次



            // 真正的上树


            // 更新数据之前
            beforeUpdate() {
                console.log("beforeUpdate","记录一些老的dom,例如一些数据的位置=>滚动条")
            },
            // 最终生成dom节点,上树
            // 更新完成
            updated() {
                console.log("updated","更新完成,获取更新后的dom")
            },

            // 销毁
            beforeDestroy() {
                // 组件消失,清除事件
                window.onscroll = null
            },




        })//.$mount("#box")
        // 当里面没有写el的时候,可以使用在后面.$mount("#box")
    </script>


</body>
</html>